/*
    14. Breadcrumb css
*/
.breadcrumb__bg {
  background: url(../img/banner/breadcrumb-bg.png);
  background-repeat: no-repeat;
  height: 130px;
  display: flex;
  align-items: center;
  position: relative;
  @media only screen and (min-width: 480px) {
    height: 150px;
  }
  @media only screen and (min-width: 576px) {
    height: 170px;
  }
  @media only screen and (min-width: 768px) {
    height: 190px;
  }
  @media only screen and (min-width: 992px) {
    height: 220px;
  }
  @media only screen and (min-width: 1200px) {
    height: 270px;
  }
  @media only screen and (min-width: 1600px) {
    height: 300px;
  }
  @media only screen and (max-width: 1600px) {
    background-position: center center;
    background-size: cover;
  }
}

.breadcrumb__content {
  position: relative;
  &--title {
    &.mb-25 {
      margin-bottom: 12px;
      @media only screen and (min-width: 768px) {
        margin-bottom: 18px;
      }
      @media only screen and (min-width: 992px) {
        margin-bottom: 20px;
      }
    }
  }
  &--menu {
    &__items {
      position: relative;
      margin-right: 20px;
      padding-right: 22px;
      font-size: 16px;
      line-height: 24px;
      @media only screen and (min-width: 768px) {
        font-size: 18px;
      }
      &:last-child {
        margin-right: 0;
        padding-right: 0;
        &::before {
          display: none;
        }
      }
      &::before {
        position: absolute;
        content: "";
        width: 3px;
        height: 20px;
        background: var(--secondary-color);
        right: 0;
        top: 4px;
        border-radius: 5px;
        transform: rotate(30deg);
      }
    }
  }
}
